<template>
    <view class="box">
        <view class="lable">修改密码</view>
        <view class="lable-tips">密码修改成功后，请重新登录验证</view>
        <view class="phone-input-list">
            <view class="phone-input">
                <view class="phone-input-lable">手机号：</view>
                <input class="phone-input-1" maxlength="11" v-model="member_mobile" placeholder-class="phone-input-pc"
                 @input="inputfocus" placeholder="请输入新手机号" disabled />
            </view>
        </view>
        <view class="code-input-list">
            <view class="code-input">
                <view class="code-input-lable">验证码：</view>
                <input class="code-input-1" maxlength="6" v-model="auth_code" placeholder-class="code-input-pc"
                    @input="inputfocus"  @blur="inputblur"  placeholder="请输入验证码" />
            </view>
            <view class="code-but" :class="iscode?'':''" @click="phone_code">{{getCode}}</view>
        </view>
        <view class="phone-input-list">
            <view class="phone-input">
                <view class="phone-input-lable">新密码：</view>
                <input type="password" maxlength="20" v-model="password" class="phone-input-1"
                    @input="inputfocus" placeholder-class="phone-input-pc" placeholder="请输入新密码（11-20位字母和数字组合）" />
            </view>
        </view>
        <view class="phone-input-list">
            <view class="phone-input">
                <view class="phone-input-lable" style="width: 150rpx;">确认新密码：</view>
                <input type="password" maxlength="20" v-model="confirm_password" class="phone-input-1"
                    @input="inputfocus" placeholder-class="phone-input-pc" placeholder="请再次输入新密码" />
            </view>
        </view>
        <view class="footer-but">
            <view class="but-1" :class="hasclick?'':'but-1-active'" @click="submit">确认</view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                array: [],
                arrayNum: [],
                arrphone: [],
                index: 0,
                getCode: "获取验证码",
                iscode: true,
                time: 60,
                type: "mobile",
                auth_code: "",
                member_mobile: '',
                password: '',
                confirm_password: '',
                hasclick:false
            }
        },
        onShow() {
            this.getUserInfo();
        },
        methods: {
            /**
             * 获取按钮显示状态
             */
            inputfocus(e){
                if(this.password=='' || this.confirm_password=='' || this.auth_code==''){
                    this.hasclick=false
                }else{
                    this.hasclick=true
                }
            },
            getUserInfo() { //获取用户信息
                let that = this;
                this.$util.request({
                    url: '/mobile/index.php?act=member_index&op=getInfo',
                    method: 'POST',
                    data: {},
                }).then((res) => {
                    if (res.error_code == 0) {
                        this.member_mobile = this.Intercept(res.datas.member_info.member_mobile);
                    }
                })
            },
            inputblur() { //进入下一步
                let that = this;
                console.log(that.auth_code)
                this.$util.request({
                    url: '/mobile/index.php?act=member_security&op=auth_submit',
                    method: 'POST',
                    data: {
                        type: "modify_pwd",
                        auth_code: that.auth_code,
                    },
                }).then(function(res) {
                    if (res.error_code == 0) {
                        // uni.navigateTo({
                        //     url: "NewPwd?auth_modify_paypwd=" + res.datas.time
                        // })
                    } else {
                        uni.showToast({
                            title: res.message,
                            icon: "none"
                        })
                    }

                })
            },
            Intercept(String1) { //字符串截取
                return String1.substring(0, 3) + "***" + String1.substring((String1.length - 4), String1.length)
            },
            //下拉框
            bindPickerChange: function(e) { //改变的事件名
                let that = this;
                console.log('picker发送选择改变，携带值为', e.target.value) //用于输出改变索引值

                this.index = e.target.value //将数组改变索引赋给定义的index变量
                this.jg = this.array[this.index] //将array【改变索引】的值赋给定义的jg变量
                if (this.index == 0) {
                    that.type = "mobile"
                } else if (this.index == 1) {
                    that.type = "email"
                }
            },
            /**
             *   // 发送状态
             */
            phone_code() {
                let that = this;
                if (that.iscode) {
                    that.iscode = false;
                    this.$util.request({ //获取验证码
                        url: '/mobile/index.php?act=member_security&op=send_auth_code',
                        method: 'get',
                        data: {
                            type: that.type
                        },
                    }).then(function(res) {
                        if (res.error_code == 0) {
                            let codesetInterval = setInterval(() => {
                                that.time--;
                                that.getCode = that.time + "秒后重新获取"
                                if (that.time <= 0) {
                                    console.log(that.time)
                                    clearInterval(codesetInterval);
                                    that.getCode = "获取验证码";
                                    that.iscode = true;
                                    that.time = 60;
                                }
                            }, 1000)
                        } else {
                            uni.showToast({
                                title: res.message,
                                icon: "none"
                            })
                            that.iscode = true;
                        }
                    })
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
    page {
        background-color: #fff;
    }

    .box {
        padding: 34rpx 30rpx;

        .lable {
            font-size: 30rpx;
            font-family: PingFang SC-Semibold, PingFang SC;
            font-weight: 600;
            color: #323232;
        }

        .lable-tips {
            font-size: 26rpx;
            font-family: PingFang SC-Regular, PingFang SC;
            font-weight: 400;
            color: #666666;
        }

        .phone-input-list {
            display: flex;
            width: 100%;
            margin-top: 40rpx;

            .phone-input {
                display: flex;
                align-items: center;
                // width: 420rpx;
                width: 100%;
                height: 80rpx;
                background: #F4F4F4;
                border-radius: 5rpx;
                opacity: 1;

                .phone-input-lable {
                    width: 120rpx;
                    font-size: 24rpx;
                    font-family: PingFang SC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #333333;
                    margin-left: 20rpx;
                }

                .phone-input-1 {
                    width: 70%;
                    height: 80rpx;
                    color: #333333;
                    font-size: 24rpx;
                    font-family: PingFang SC-Regular, PingFang SC;
                    font-weight: 400;
                }

                .phone-input-pc {
                    font-size: 24rpx;
                    font-family: PingFang SC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #999999;
                }
            }
        }

        .code-input-list {
            display: flex;
            margin-top: 40rpx;

            .code-input {
                display: flex;
                align-items: center;
                // width: 420rpx;
                height: 80rpx;
                background: #F4F4F4;
                border-radius: 5rpx;
                opacity: 1;

                .code-input-lable {
                    width: 120rpx;
                    font-size: 24rpx;
                    font-family: PingFang SC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #333333;
                    margin-left: 20rpx;
                }

                .code-input-1 {
                    height: 80rpx;
                }

                .code-input-pc {
                    font-size: 24rpx;
                    font-family: PingFang SC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #999999;
                }
            }

            .code-but {
                margin-left: 20rpx;
                width: 250rpx;
                height: 80rpx;
                background: #E96A1D;
                border-radius: 5rpx 5rpx 5rpx 5rpx;
                opacity: 1;

                font-size: 24rpx;
                font-family: PingFang SC-Regular, PingFang SC;
                font-weight: 400;
                color: #FFFFFF;

                display: flex;
                align-items: center;
                justify-content: center;
            }
        }

        .footer-but {
            margin-top: 200rpx;
            padding: 0 25rpx;

            .but-1 {
                height: 88rpx;
                background: linear-gradient(138deg, #EA8C1E 0%, #E84A1D 100%);
                border-radius: 50rpx;
                opacity: 1;

                display: flex;
                align-items: center;
                justify-content: center;

                font-size: 34rpx;
                font-family: PingFang SC-Regular, PingFang SC;
                font-weight: 400;
                color: #FFFFFF;
            }

            .but-1-active {
                background: #F4B48D;
            }
        }
    }
</style>